<template>
  <div>
    <!-- 每日行情 -->
    <div class="mrhq-class">
      <div class="mrhq-title">
        螺丝椒
        <img src="@/assets/government/digitalFarmland/arrow-bottom.png" />
      </div>
      <div class="df aic jcsb flexwp mrhq-content">
        <div class="mrhq-item" v-for="item in mrhqList" :key="item">
          <div class="fs18 mb20">{{ item.title }}</div>
          <div class="fs16 mb20 ">
            <span class="cFFF44A fs24 fwb"> {{ item.value }}</span
            >元/kg
          </div>
        </div>
      </div>
    </div>
    <!-- 销往地分析 -->
    <div class="xwdfx-class mt15">
      <div class="xwdfx-title">
        螺丝椒
        <img src="@/assets/government/digitalFarmland/arrow-bottom.png" />
      </div>
      <div id="wxdfx" style="width: 550px;height: 300px;margin-top: 0px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mrhqList: [
        { title: "每日行情", value: "2.2" },
        { title: "最高价", value: "4.2" },
        { title: "平均价", value: "2.66" },
        { title: "最低价", value: "2.2" },
      ],
    };
  },
  mounted() {
    this.intinzwqk();
  },
  methods: {
    intinzwqk() {
      let myChart = this.$echarts.init(document.getElementById("wxdfx"));
      myChart.setOption({
        color: ["#1CC274", "#FE6A00", "#00F6FF", "#FFE400"],
        xAxis: {
          type: "category",
          data: [
            "重庆",
            "四川",
            "云南",
            "上海",
            "浙江",
            "江苏",
            "东北",
            "上海",
            "浙江",
            "江苏",
            "东北",
          ],
          axisLabel: {
            color: "white",
            fontSize: 13, // 设置字体大小为 14px，可以根据需要调整
            fontWeight: "bold",
          },
        },
        grid: {
          top: "30%",
          left: "2%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        legend: {
          show: false,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "white",
            fontSize: 14, // 设置字体大小为 14px，可以根据需要调整
            fontWeight: "bold",
          },
          name: "均价（元/kg）",
          nameTextStyle: {
            color: "white",
            fontSize: "14",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        series: [
          {
            name: "均价(元/kg)",
            data: [120, 200, 150, 80, 70, 110, 130, 80, 70, 110, 130],
            type: "bar",
          },
          {
            name: "产量(吨)",
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "rgba(252,230,48,1)",
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: "top",
                  formatter: function(p) {
                    return p.value > 0 ? p.value : "";
                  },
                },
              },
            },
            data: [103, 369, 292, 380, 259, 115, 178, 465, 629, 433, 285, 428],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cFFF44A {
  color: #fff44a;
}
.xwdfx-class {
  width: 551px;
  height: 309px;
  background-image: url(".././../../../assets/government/PriceQuotes/2.png");
  .xwdfx-title {
    width: 115px;
    height: 30px;
    background: linear-gradient(0deg, #0072ff 0%);
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    float: right;
    margin-right: 20px;
    margin-top: 4px;
  }
}

.mrhq-class {
  width: 551px;
  height: 309px;
  background-image: url(".././../../../assets/government/PriceQuotes/1.png");
  .mrhq-title {
    width: 115px;
    height: 30px;
    background: linear-gradient(0deg, #0072ff 0%);
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    float: right;
    margin-right: 20px;
    margin-top: 4px;
  }
  .mrhq-content {
    width: 470px;
    margin: 0 41px 21px;
    padding-top: 30px;
  }
  .mrhq-item {
    padding: 20px;
    background: linear-gradient(90deg, #168ce2 0%, #2474d7 100%);
    &:nth-child(2) {
      background: linear-gradient(90deg, #5f63cc 0%, #3e43d1 100%);
    }
    &:nth-child(3) {
      background: linear-gradient(-90deg, #0fbcd2 0%, #2bd4bd 100%);
    }
    &:nth-child(4) {
      background: linear-gradient(90deg, #f99212 0%, #fa6e07 100%);
    }
    border-radius: 6px;
    width: 220px;
    height: 100px;
    margin-bottom: 24px;
  }
}
</style>
